<style lang="less">
    .modal-box img{
        width: 600px;
    }
</style>

<template>
    <Card>
        <p slot="title">
            <Breadcrumb>
                <BreadcrumbItem to="/dashboard/index"><Icon type="ios-home-outline"></Icon> 首页</BreadcrumbItem>
                <BreadcrumbItem to="/sys/setting"><Icon type="ios-list"></Icon> 系统配置</BreadcrumbItem>
                <BreadcrumbItem to="/sms/setting"><Icon type="ios-copy-outline"></Icon> 运营配置</BreadcrumbItem>
            </Breadcrumb>
        </p>
        <ButtonGroup v-if="this.tableSelects.length>0">
            <Poptip
                    confirm
                    title="确认全部隐藏吗？"
                    @on-ok="handeHide(1)"
            >
                <Button>全部隐藏</Button>
            </Poptip>
            <Poptip
                    confirm
                    title="确认全部显示吗？"
                    @on-ok="handeHide(0)"
            >
                <Button>全部显示</Button>
            </Poptip>
        </ButtonGroup>
        <can-edit-table
                border
                v-model="list"
                @on-cell-change="handleCellChange"
                @on-change="handleChange"
                :editIncell="true"
                :columns-list="columns"
        ></can-edit-table>
<!--        <div style="margin: 10px;overflow: hidden">
            <div style="float: right;">
                <Page
                        :total="total"
                        :current="current"
                        :page-size="pageSize"
                        :show-elevator="true"
                        :page-size-opts="[12, 20, 30, 40]"
                        :show-sizer="true"
                        @on-change="changePage"
                        @on-page-size-change="changePageSize"
                ></Page>
            </div>
        </div>-->
    </Card>
</template>
<script>
    import Util from '../../libs/util';
    import moment from 'moment';
    import canEditTable from './components/canEditTable.vue';

    export default {
        components: {
            canEditTable
        },
        data () {
            return {
                columns: [
                    // {
                    //     type: 'selection',
                    //     key: 'user_id',
                    //     width: 60,
                    //     align: 'center'
                    // },
                    {
                        title: 'ID',
                        align: 'center',
                        width: 60,
                        key: 'id'
                    },
                    {
                        title: '名称',
                        key: 'show_name'
                    },
                    {
                        title: '配置值',
                        key: 'value',
                        editable: true
                    },
                    {
                        title: '百分比换算',
                        key: 'show'
                    },
                    {
                        title: '说明',
                        key: 'description',
                        editable: true
                    },
                    {
                        title: '更新时间',
                        key: 'update_time',
                        render: (h, params) => {
                            return h('div', Util.formatDate(params.row.update_time));
                        }
                    },
                    {
                        title: '操作',
                        align: 'center',
                        width: 200,
                        key: 'handle',
                        handle: ['edit']
                    }
                ],
                list: [],
                total: 0,
                current: this.$route.params.page ? this.$route.params.page : 1,
                pageSize: 100,
                loading: true,
                searchForm: {
                    moble: '',
                    date_s: '',
                    date_e: '',
                    type: '',
                    user_id: ''
                },
                searchFormRules: {
                },
                hasSubmit: false,
                tableSelects: [],
                searchBrnLoading: false,
            };
        },
        mounted: function () {
            this.$nextTick(function () {
                const $params = {page: this.current};
                this.getList($params);
            });
        },
        methods: {
            getList: function (params) {
                let p = {
                    ...params,
                    group: 'sacle'
                }
                Util.ajax.post(`/adminapi/sysconfig/config`, p).then(response => {
                    this.list = response.data.data.list;
                    this.total = response.data.data.total;
                    this.current = response.data.data.current;
                    this.pageSize = response.data.data.pageSize;
                    this.loading = false;
                    this.hasSubmit = false;
                });
                this.searchBrnLoading = false;
            },
            selectRow (selection, row) {
                this.tableSelects = selection;
            },
            remove (index) {
                this.data6.splice(index, 1);
            },
            changePage (e) {
                this.loading = true;
                const params = {page: e, pageSize: this.pageSize};
                this.list = this.getList(params);
            },
            changePageSize (e) {
                this.loading = true;
                const params = {page: 1, pageSize: e};
                this.list = this.getList(params);
            },
            handleCellChange (val, index, key) {
                this.editConfig(val[index]);
            },
            handleChange (val, index) {
                this.editConfig(val[index]);
            },
            editConfig (val) {
                Util.ajax.post(`/adminapi/sysconfig/edit`, val).then(response => {
                    if(response.data.code == 0) {
                        this.$Message.success('修改成功');
                        this.getList();
                    }else {
                        this.$Message.error('修改失败');
                    }
                });
            }

        }
    };
</script>
